<template>
  <div class="container">
    <div class="header">
      <el-row>
        <el-col :span="4">
          <el-button icon="el-icon-printer" circle style="margin-left:10px;" @click="printer"></el-button>
        </el-col>
        <el-col :span="12">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="change"
            :picker-options="pickerOptions2">
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          <el-select v-model="value" placeholder="选择分店" @change="change">
            <el-option
              label="Total"
              value="total">
            </el-option>
            <el-option
              v-for="i in 10"
              :key="i"
              :label="'branch'+i"
              :value="'branch'+i">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="mainer">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="status"
          label="Status"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="branch"
          label="Branch"
          width="70"
        >
        </el-table-column>
        <el-table-column
          prop="sender"
          label="Sender">
        </el-table-column>
        <el-table-column
          prop="time"
          label="Time">
        </el-table-column>
        <el-table-column
          prop="price"
          label="Price">
        </el-table-column>
        <el-table-column
          prop="user"
          label="User">
        </el-table-column>
        <el-table-column
          prop="material"
          label="Material">
        </el-table-column>
        <el-table-column
          prop="burdening"
          label="Burdening">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GDFunctionOrderPrinter",
    data() {
      return {
        pickerOptions2: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                const start = new Date();
                picker.$emit('pick', [start, start])
              }
            }, {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
        },
        dateRange: '',
        value: 'total',
        tableData: [],
      };
    },
    methods: {
      printer() {
        window.print();
      },
      change() {
        this.tableData = this.api.getDailySheet(this.dateRange, this.value);
      }
    },
    computed: {}
  }
</script>

<style scoped>
  .container {
    width: 100%;
    /*height: 100%;*/
    background: #fff;
  }

  .header {
    width: 100%;
    height: 45px;
    padding-top: 5px;
    box-shadow: 0 4px 4px #eaeaea;
  }

  .mainer {
    margin-top: 8px;
  }
</style>
